<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>快速抢单</title>
		<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
		<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
		<script src="js/bootstrap-table-zh-CN.min.js"></script>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
		<!--图表插件-->
		<link rel="stylesheet" type="text/css" href="layui/layui/css/layui.css">
		<script type="text/javascript" src="layui/layui/layui.js"></script>
		<script type="text/javascript" src="js/Chart.js"></script>
		<script src="js/jconfirm/jquery-confirm.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
		<script src="js/ServerUrl.js"></script>
		<script type="text/javascript">
			$(function() {
				searchCompany();
			})

			function searchByName() {
				$('#mytab').bootstrapTable('destroy');
				searchCompany(document.getElementById("searchName").value);
			}

			function searchCompany(companyname) {
				var url;
				if (companyname == null) {
					// console.log("null");
					url = serverUrl + "/findallClient";
				} else {
					// console.log("not null");
					url = serverUrl + "/getbyClientname?companyname=" + companyname;
				}
				//生成用户数据
				$('#mytab').bootstrapTable({
					method: 'get',
					contentType: "application/x-www-form-urlencoded",
					dataType: "json",
					url: url,
					// height: tableHeight(), //高度调整
					striped: true, //是否显示行间隔色
					// dataField: "res",//获取数据的别名，先省略，则为你返回的
					pageNumber: 1, //初始化加载第一页，默认第一页
					pagination: true, //是否分页
					queryParamsType: 'limit',
					queryParams: queryParams,
					sidePagination: 'client', //在服务器分页
					pageSize: 6, //单页记录数
					pageList: [6, 8, 10, 12], //分页步进值
					showRefresh: true, //刷新按钮
					// showColumns:true,
					clickToSelect: true, //是否启用点击选中行
					toolbarAlign: 'right',
					buttonsAlign: 'right', //按钮对齐方式
					toolbar: '#toolbar', //指定工作栏
					search: true, //是否显示表格搜索
					columns: [{
							title: '客户ID',
							field: 'id',
							sortable: true
						},
						{
							title: '客户等级',
							field: 'clientgrade',
							sortable: true
						},
						{
							title: '公司名称',
							field: 'companyname',
							sortable: false
						},
						{
							title: '规模',
							field: 'companyscale'
						},
						{
							title: '公司性质',
							field: 'companykind'
						},
						{
							title: '订单id',
							field: 'demandid'
						},
						{
							title: '月订单额（万）',
							field: 'purchase'
						},
						{
							title: '距离',
							field: 'distance'
						},
						{
							title: '分配业务员',
							field: 'username'
						},
						{
							title: '最新操作日期',
							field: 'startdate'
						},
						{
							title: '操作',
							field: 'username',
							align: 'center',
							formatter: AddFunctionAlty //添加按钮
						}
					],
					locale: 'zh-CN', //中文支持,
				})
			}

			function tableHeight() {
				return $(window).height() - 140;
			}
			//列表行‘操作’按钮
			function AddFunctionAlty(value, row, index) {
				var pagenum=parseInt(index/$("#mytab").bootstrapTable("getOptions").pageSize)+1;
				if (row.completestatus == "true") {
					return '<button id="TableView" disabled="disabled" type="button" class="btn btn-w-md btn-round btn-info"><del>此单已完成</del></button>'
				} else {
					if (value == undefined) {
						return '<button id="TableView" onclick="grab(' + row.id + ',' + row.demandid + ',' + pagenum +
							')" type="button" class="btn btn-w-md btn-round btn-danger">抢单</button>'

					} else {
						return '<button id="TableView" disabled="disabled" type="button" class="btn btn-w-md btn-round btn-primary">已被抢</button>'

					}
				}

			}
			//请求服务数据时所传查询参数
			function queryParams(params) {
				return {
					pageSize: params.limit,
					pageNum: params.pageNumber,
					name: $('#searchName').val()
				}
			}

			function grab(clientid, demandid, index) {
				var userid = Cookies.get('id');
				// alert(index);
				$.ajax({
					//几个参数需要注意一下
					type: "post", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/grabHandlerid",
					data: {
						"clientid": clientid,
						"userid": userid,
						"demandid": demandid
					},
					success: function(result) {
						if (result.status == 200) {
							layer.msg('抢单成功');
							$("#mytab").bootstrapTable('refreshOptions', {
								pageNumber: index 
							});
						} else {
							layer.msg('抢单失败');
							$("#mytab").bootstrapTable('refreshOptions', {
								pageNumber: index 
							});
						}
					},
					error: function() {
						layer.msg('抢单时异常');
						$("#mytab").bootstrapTable('refreshOptions', {
							pageNumber: index 
						});
					}
				});
			}
			//查询按钮事件
			$('#search_btn').click(function() {
				$('#mytab').bootstrapTable('refresh', {
					url: '/getOneCadreInfo/list'
				}); //url为后台action
			})
		</script>
	</head>

	<body>
		<div class="container-fluid">
			<div class="tableBody">
				<div class="panel panel-default">
					<div class="panel-body">
						<div class="col-xs-6">
							<input placeholder="公司名" type="text" class="form-control" name="name" id="searchName" />
						</div>
						<div class="col-xs-6">
							<button class="btn btn-primary" id="search_btn" onclick='searchByName()'>查询</button>
						</div>
					</div>
				</div>
				<div style="width:100%;">
					<table id="mytab" class="table table-bordered table-hover table-striped"
						style="background-color: white;width:100%; text-align:center">
					</table>
					<h4 style="color:#aaa;">【注】客户资料和订单需求在抢单时仅显示部分信息，当成为你的客户后才可查阅全部详细信息</h4>

				</div>
			</div>
		</div>
	</body>
</html>
